import { sizeAdapter } from './index';
const dpr = $('html').data('dpr');
//持仓分析饼图配置
const option = {
  animation: !0,
  preventDefaultMouseWheel: !0,
  grid: {
    top: '25%',
    left: '-25%',
    right: '0%',
    bottom: '17%',
  },
  data: [
    {
      originData: {
        title: '股票池\n分布统计',
        values: [],
      },
    },
  ],
  tooltip: [
    {
      trigger: 'item',
      triggerOn: 'click',
      style: {
        color: '#D2D2D3',
        fontSize: '0.4rem',
      },
      formatter(d) {
        let tempValue;
        for (let index = 0; index < d.series.length; index++) {
          const element = d.series[index];
          tempValue = element.item.value;
        }
        return `${(tempValue * 100).toFixed(2)}%`;
      },
    },
  ],
  series: [
    {
      hoverAnimation: !0,
      type: 'pie',
      name: 'arc1',
      center: ['45%', '30%'],
      radius: [
        sizeAdapter() === 'small' ? 45 : 45 * dpr,
        sizeAdapter() === 'small' ? 65 : 65 * dpr,
      ],
      title: {
        offsetCenter: [0, 0],
        textStyle: {
          fontSize: sizeAdapter() === 'small' ? 14 : 14 * dpr,
          color: window.getCssStyle() === 'black' ? '#D2D2D3' : '#999999',
        },
      },
      circleStyle: {
        innerCircleRadius: '0',
      },
      label: {
        show: false,
        formatter(orginD, d) {
          return `${(d * 100).toFixed(2)}%`;
        },
        textStyle: {
          position: 'center',
          color: window.getCssStyle() === 'black' ? '#D2D2D3' : '#323232',
          fontSize: sizeAdapter() === 'small' ? 12 : 12 * dpr,
        },
      },
      itemStyle: {
        shadowRadius: 2,
      },
      data: {
        dataIndex: 0,
      },
    },
  ],
  title: {
    show: !0,
    left: '30px',
    top: '8%',
    style: {
      normal: {
        fill: window.getCssStyle() === 'black' ? '#D2D2D3' : '#323232',
        fontSize: sizeAdapter() === 'small' ? 12 : 12 * dpr,
      },
    },
  },
  legend: [
    {
      show: true,
      textStyle: {
        color: window.getCssStyle() === 'black' ? '#D2D2D3' : '#323232',
        fontSize: sizeAdapter() === 'small' ? 12 : 12 * dpr,
      },
      left: '60%',
      top: '15%',
      selected: {},
      symbol: {
        type: 'circle',
      },
      orient: 'vertical',
      verticalGap: sizeAdapter() === 'small' ? 15 : 15 * dpr, //每项图例之间的垂直距离
      data: [],
      formatter(t) {
        const tempName = {};
        const tempData = option.data[0].originData.values;
        if (tempData) {
          tempData.forEach(item => {
            tempName[item.name] = item.value;
          });
        }
        return `${t + (tempName[t] * 100).toFixed(2)}%`;
      },
    },
  ],
};
//收益曲线图配置
const lineOption = {
  animation: !1,
  preventDefaultMouseWheel: !1,
  title: {
    show: true,
    top: 10,
    left: 45,
    style: {
      normal: {
        fill: '#2c2c2c',
        fontSize: sizeAdapter() === 'small' ? 12 : 12 * dpr,
      },
    },
  },
  data: [
    {
      originData: [],
    },
  ], //mock数据
  grid: {
    top: '16%',
    left: sizeAdapter() === 'small' ? 30 : 30 * dpr,
    right: sizeAdapter() === 'small' ? 10 : 10 * dpr,
    bottom: '17%',
  },
  series: [
    {
      type: 'line',
      $dataIndex: 0,
      dataKey: 'self',
      name: '默认收益',
      symbol: {
        emphasis: {
          show: true,
          size: sizeAdapter() === 'small' ? 5 : 5 * dpr,
          style: {
            fill: '#ff0004',
            stroke: 'rgba(255, 0, 4, 0.49)',
            lineWidth: 1,
          },
        },
      },
      line: {
        show: true,
        style: {
          normal: {
            stroke: '#F06F6F',
            lineWidth: 1,
          },
        },
      },
      area: {
        show: true,
        style: {
          normal: {
            fill: 'rgba(255, 0, 4, 0.4)',
            opacity: 0,
          },
        },
      },
    },
    {
      type: 'line',
      $dataIndex: 0,
      dataKey: 'szzs',
      name: '沪深300',
      symbol: {
        emphasis: {
          show: true,
          size: sizeAdapter() === 'small' ? 5 : 5 * dpr,
          style: {
            fill: '#0b8ed9',
            stroke: 'rgba(11, 142, 217, 0.49)',
            lineWidth: 1,
          },
        },
      },
      line: {
        show: true,
        style: {
          normal: {
            stroke: '#7EB2F3',
            lineWidth: 1,
          },
        },
      },
      area: {
        show: true,
        style: {
          normal: {
            fill: 'rgba(11, 142, 217, 0.2)',
            opacity: 0,
          },
        },
      },
    },
  ],
  axis: [
    {
      position: 'bottom',
      type: 'point',
      $dataIndex: 0,
      dataKey: 'date',
      paddingInner: 100,
      intervalLength: sizeAdapter() === 'small' ? 95 : 95 * dpr, //x轴坐标宽度
      tickValues(d) {
        const n = d.length - 1;
        const midIndex = Math.round(n / 2);
        return [d[0], d[midIndex], d[d.length - 1]];
      },
      label: {
        show: true,
        padding: 10,
        inRange: true,
        style: {
          fill: ' #999999',
          fontSize: sizeAdapter() === 'small' ? 10 : 10 * dpr,
          lineWidth: 1,
        },
        formatter(d) {
          d = d.toString();
          return `${d.substring(0, 4)}-${d.substring(4, 6)}-${d.substring(6, 8)}`;
        },
      },
      line: {
        show: true,
        style: {
          lineWidth: 0.3,
          stroke: '#EEEEEE',
        },
      },
      tick: {
        //刻度尺
        show: false,
        outerSize: 3,
        innerSize: 0,
        style: {
          lineWidth: 1,
          stroke: '#CCCCCC',
        },
      },
    },
    {
      position: 'left',
      type: 'linear',
      xOrY: 'y',
      splitNumber: 5,
      label: {
        show: true,
        padding: sizeAdapter() === 'small' ? 5 : 1 * dpr,
        style: {
          fill: '#a0a0a0',
          fontSize: sizeAdapter() === 'small' ? 10 : 10 * dpr,
          lineWidth: 1,
        },
        formatter(d) {
          d = d * 100;
          return `${d.toFixed(0)}%`;
        },
      },
      splitLine: {
        show: true,
        style: {
          color: 'rgba(0, 0, 0, 0.05)',
          lineWidth: 0.3,
        },
      },
      line: {
        show: true,
        style: {
          lineWidth: 0.3,
          stroke: '#CCCCCC',
        },
      },
      tick: {
        show: false,
        outerSize: 3,
        innerSize: 0,
        style: {
          lineWidth: 1,
          stroke: '#CCCCCC',
        },
      },
    },
  ],
  tooltip: [
    {
      alwaysShowContent: true, //设置toolTip展示类型
      trigger: 'axis',
      $axisIndex: 0,
      style: {
        fontSize: sizeAdapter() === 'small' ? '12px' : `${12 * dpr}px`,
      },
      dataFormatter(d) {
        return `${(d * 100).toFixed(2)}%`;
      },
    },
  ],
  dataZoom: [
    {
      $gridIndex: [0, 1],
      left: 0,
      right: 20,
      top: 0,
      bottom: 0,
      startValue: -700,
      minValueSpan: 700,
      maxValueSpan: 700,
      moveOnMouseMove: false,
      zoomOnMouseWheel: false,
    },
  ],
  axisPointer: {
    line: {
      show: !0,
      style: {
        stroke: 'white',
        lineWidth: 1,
        opacity: 0.5,
      },
    },
    label: {
      show: !1,
    },
  },

  legend: [
    {
      show: !0,
      data: ['默认收益', '沪深300'],
      left: '2%',
      top: sizeAdapter() === 'small' ? '5%' : '2%',
      textStyle: {
        color: ' #CCCCCC',
        fontSize: sizeAdapter() === 'small' ? 10 : 10 * dpr,
        fontFamily: 'SimSun',
      },
    },
  ],
  textStyle: {
    fill: '#a0a0a0',
    fontFamily: '微软雅黑',
    fontSize: 10,
    fontStyle: 'normal',
    fontWeight: 'normal',
  },
  axisPointer: {
    $axisIndex: 0,
    line: {
      style: {
        stroke: '#aaa',
        lineDash: [2, 3],
        lineWidth: 1,
      },
    },
    label: {
      gap: 0,
      style: {
        fill: 'white',
        textBorderRadius: 0,
        textBackgroundColor: '#555',
        fontFamily: '微软雅黑',
        textPadding: 4,
      },
    },
  },
};

function drawPie(names, pieOptionData, title) {
  // 右侧label名称
  option.legend[0].data = names;
  option.data[0].originData.values = pieOptionData;
  if (title) {
    option.data[0].originData.title = `${title}\n分布统计`;
  }
  // 画饼图
  if (option) {
    const myChart = D3Charts.init('chart');
    myChart.setOption(option);
  }
}
export default {
  option,
  lineOption,
  drawPie,
};
